$green: #13a099 !default
.banner-res
    background-color: #fff
    img
        margin: 0 auto
        max-width: 1440px
article
    a
        transition: all .2s
        &:hover
            color: $green
    @at-root .intro p
        text-indent: 2em
        line-height: 32px
    h2
        font-size: 24px
        padding: 30px 0 20px
        small
            font-size: 14px
            font-weight: 400
            opacity: 1
            @media (max-width: 419px)
                display: block
            @media (min-width: 420px)
                padding-left: 15px
    strong
        color: $green
    p
        font-size: 16px
    @at-root .product-type
        .l
            display: none
            @media (min-width:1000px)
                display: block
                float: left
                width: 210px
                border: 1px solid #dbdbdb  
            li
                cursor: pointer
                @media (min-width:1000px)
                    font-size: 18px
                    line-height: 55px
                    text-align: center
                    border:
                        left: 5px solid transparent
                        top: 1px solid #dbdbdb
                    &:first-child
                        border-top: 0
                    &.active
                        border-left-color: $green
                        background-color: lighten($green,60%)
            @media (min-width:1200px)
                width: 250px
                li
                    line-height: 69px
        .r>li
            display: none
            &.active
                display: block
        .r
            position: relative
            @media (min-width:1000px)
                display: block
                float: left
                width: 770px
                background-color: lighten($green,60%)
                padding: 15px
                max-height: 491px
            @media (min-width:1200px)
                width: 920px
                padding: 23px
            ul.list-unstyle
                list-style: none
            h3
                padding: 15px 0 5px
                @media (min-width:760px)
                    padding: 0 0 5px
                    @media (min-width:1200px)
                        font-size: 20px
                        padding-bottom: 10px
            @at-root .feature
                margin-bottom: 10px
                line-height: 24px
                @media (min-width:760px) and (max-width:999px)
                    margin-bottom: 3px
                i
                    color: $green
                    padding-right: 10px

            @at-root .product-link
                margin: 6px -5px 0 -5px
                @media (min-width:760px) and (max-width:999px)
                    margin-top: 2px
                li
                    text-align: center
                    width: 50%
                    @media (min-width:450px) and (max-width:759px)
                        width: 25%
                    float: left
                    padding: 4px 5px
                    a
                        color: #fff
                        background-color: $green
                        width: 100%
                        display: block
                        line-height: 26px
                    @media (min-width:1200px)
                        font-size: 16px
                        a
                            line-height: 32px
            @at-root .application
                margin-top: 15px
                h4
                    display: none
                    font-size: 30px
                    color: #fff
                    background-color: $green
                    width: 88px
                    height: 90px
                    float: left
                    text-align: center
                    line-height: 40px
                    padding-top: 5px
                    position: relative
                    margin-right: 12px
                    @media (min-width:760px)
                        display: block
                        margin-right: 42px
                        &::after
                            display: block
                            content: ""
                            position: absolute
                            left: 88px
                            top: 30px
                            width: 0
                            height: 0
                            border:
                                left: 27px solid $green
                                top: 17px solid transparent
                                bottom: 17px solid transparent
                    @media (min-width:1000px)
                        margin-right: 60px
                @at-root .appli-list
                    p
                        margin-bottom: 10px
                    li
                        float: left
                        padding: 2px 4px
                        @media (min-width:502px)
                            font-size: 16px
                            padding: 6px 8px
                            min-width: 80px
                    @media (min-width:760px)
                        padding: 10px 0
            .pager-prev,.pager-next
                position: absolute
                top: 15%
                @media (min-width:450px)
                    top: 22%
                @media (min-width:760px)
                    top: 28%
                @media (min-width:1000px)
                    display: none
            .pager-next
                right: 0
    @at-root .product-profile
        img
            margin: 10px auto 0
        p
            padding: 15px 0 15px
            @media (min-width:760px)
                    padding-bottom: 0
            line-height: 32px
            max-width: 201px
            display: block
            margin: 0 auto
    @at-root .product-news
        h3
            padding: 15px 0 10px
        li
            line-height: 32px
            position: relative
            padding-left: 32px
            &::before
                display: block
                content: ""
                position: absolute
                left: 0
                top: 8px
                width: 16px
                height: 16px
                background-color: $green
    @at-root .msg
        padding-bottom: 30px
        img
            padding: 30px 0 25px
        .button
            color: #fff
            background-color: $green
            transition: all .2s
            &:hover
                background-color: darken($green,5%)
        .province,.city
            width: 50%
            float: left
        .province
            padding-right: 10px
        .city
            padding-left: 10px
        @media (min-width:1000px)
            max-width: 850px
        @media (min-width:1200px)
            max-width: 1100px